//  组件库  主题颜色
/*  
   变量  $   -  !default 默认变量  !global  全局变量
   @minxin  @include  
   @content
   map列表函数 -  each in
   + map-get($list,$key)  =>  key对应属性值
   + map-marge($list1,$list2)  => 合并列表函数
   + map-keys($list) => 属性名
   + map-values($list) => 属性值
   $list:(
       $key:value,
       $key:value
       ....
   )

 换肤的核心思想 - 动态控制类名的切换   
 .theme - 颜色 {
     color:颜色
     border:1px solid 颜色
 } 
*/

// 省略号  @content  插槽 solt
//  如何include调用的名称和minxin定义的名称一样的情况下
//  在include的花括号里面定义的样式属性会传递给mixin里面的@content
//  include 1.调用minxin  2.给minix传递属性

@mixin name {
    display:-webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    @content;
}

.box{
    @include name{
        -webkit-line-clamp: 2;
    };
}


// ===================================
@mixin name {
    display:-webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 2;
}

.box{
    @include name;
}

// key:value  属性名
$list:(
    color1:red,
    color2:blue,
    color3:green
);
$list1:(
    color4:pink,
    color5:yellow
);

@debug map-get($list,"color1");   // red
@debug map-keys($list);    // color1, color2, color3
@debug map-values($list); // red, blue, green
@debug map-merge($list,$list1) // (color1: red, color2: blue, color3: green, color4: pink, color5: yellow)

/* 

@funcition($key){
    @return ...
}
 */






/* .theme-blue .box{
    color:blue
} */


